<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>云π</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/js.js" type="text/javascript"></script>
<style type="text/css">
	body{background:url(img/bg.png) no-repeat top left;background-size:100% 100%;}
</style>

</head>
<body style="position: relative;">
	<!-- 头部 -->
	<div class="header">
		<a href="javascript:history.go(-1);" class="hele"></a>
		<h1 class="hetitle">账户明细</h1>
	</div>
	
	<div id="page" class="page m">
		<!--次导航-->
		<div class="ordenav">
			<a href="javascript:;" class="odnlink on">转账明细</a>
			<a href="javascript:;" class="odnlink">挖矿明细</a>
			<a href="javascript:;" class="odnlink">分享明细</a>
		</div>
		<div class="ordelistd">
			<!--转账明细-->
			<ul class="ordelist" style="display: block;">
				<li class="ordeitem"><a href="javascript:dialog('#d1');" class="ordelink">
					<span class="ordele">
						<p class="ordelet">购买CIC -> 购买CIC</p>
						<p class="ordelet">2018-8-29 16:16:16</p>
					</span>
					<span class="ordelet2">+3000.0000CIC</span>
				</a></li>
				<li class="ordeitem"><a href="javascript:dialog('#d1');" class="ordelink">
					<span class="ordele">
						<p class="ordelet">购买CIC -> 购买CIC</p>
						<p class="ordelet">2018-8-29 16:16:16</p>
					</span>
					<span class="ordelet2 on">-3000.0000CIC</span>
				</a></li>
			</ul>
			<!--挖矿明细-->
			<ul class="ordelist">
				<li class="ordeitem"><a href="javascript:dialog('#d1');" class="ordelink">
					<span class="ordele">
						<p class="ordelet">购买CIC2 -> 购买CIC</p>
						<p class="ordelet">2018-8-29 16:16:16</p>
					</span>
					<span class="ordelet2">+3000.0000CIC</span>
				</a></li>
				<li class="ordeitem"><a href="javascript:dialog('#d1');" class="ordelink">
					<span class="ordele">
						<p class="ordelet">购买CIC -> 购买CIC</p>
						<p class="ordelet">2018-8-29 16:16:16</p>
					</span>
					<span class="ordelet2 on">-3000.0000CIC</span>
				</a></li>
			</ul>
			<!--分享明细-->
			<ul class="ordelist">
				<li class="ordeitem"><a href="javascript:dialog('#d1');" class="ordelink">
					<span class="ordele">
						<p class="ordelet">购买CIC3 -> 购买CIC</p>
						<p class="ordelet">2018-8-29 16:16:16</p>
					</span>
					<span class="ordelet2">+3000.0000CIC</span>
				</a></li>
				<li class="ordeitem"><a href="javascript:dialog('#d1');" class="ordelink">
					<span class="ordele">
						<p class="ordelet">购买CIC -> 购买CIC</p>
						<p class="ordelet">2018-8-29 16:16:16</p>
					</span>
					<span class="ordelet2 on">-3000.0000CIC</span>
				</a></li>
			</ul>
		</div>
	</div>
	
<!--遮罩-->
<div class="mask"></div>
<!--详情弹窗-->
<div class="dialog" id="d1" onclick="dialogClose()">
	<div class="dialog_content">
		<div class="diaclist">
			<p class="diaordet">转出方：甲方</p>
			<p class="diaordet">转入方：乙方</p>
			<p class="diaordet">交易金额：3000.0000</p>
			<p class="diaordet">交易时间：2018-8-29 16:16:16</p>
		</div>
    </div>
</div>
</body>
<script type="text/javascript">
	$(function(){
		//背景高宽
		$("body").width($(document).outerWidth(true));
		$("body").height($(document).outerHeight(true));
		
		// 次导航选择
		$(".ordenav .odnlink").click(function(){
			$(this).addClass("on").siblings(".odnlink").removeClass("on");
			var i=$(this).index();
			$(".ordelistd .ordelist").eq(i).show().siblings(".ordelist").hide();
		});
	});
	
</script>
</html>